import React from 'react';
import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import {Icon} from 'antd';
import {getcookie} from '../../utils/cookies'
import {setcookie} from '../../utils/cookies'
import pageRight from '../../assets/pageRight.png'

//模拟数据
const textData = {
  title: '老师的信息或者课程的详情介绍',
  teachName:'罗良奎',
  avatarUrl:'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKriab5ng7icpcctz6t7Q09dNUa4swM8uWibpkmWsAL1PBjCibC5lbJktI1X4yQPpElicbVWnbuiccicn02g/0',
  price: 120,
  yCoin: 12000,
  saleVolume: 1500
};
// let dataArray = [
//   { image: 'https://zos.alipayobjects.com/rmsportal/DGOtoWASeguMJgV.png' },
//   { image: 'https://zos.alipayobjects.com/rmsportal/BXJNKCeUSkhQoSS.png' },
//   { image: 'https://zos.alipayobjects.com/rmsportal/TDIbcrKdLWVeWJM.png' },
//   { image: 'https://zos.alipayobjects.com/rmsportal/SDLiKqyfBvnKMrA.png' },
// ];

let dataArray = [
  { image: 'https://zos.alipayobjects.com/rmsportal/DGOtoWASeguMJgV.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/BXJNKCeUSkhQoSS.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/TDIbcrKdLWVeWJM.png' },
  // { image: 'https://zos.alipayobjects.com/rmsportal/SDLiKqyfBvnKMrA.png' },
];

dataArray = dataArray.map(item => ({ ...item, ...textData }));
// console.log("---------------dataArray",dataArray)

class Content extends React.Component {
  static defaultProps = {
    className: 'content0',
  };



  static propTypes = {
    className: PropTypes.string,
  };


  constructor(props) {
    super(props);
    this.state = {
      picOpen: {},
    };
  }


  onImgClick = (e, i) => {

  };



  onTweenEnd = (i) => {
    const picOpen = this.state.picOpen;
    delete picOpen[i];
    this.setState({
      picOpen,
    });
  };

  getDelay = (e) => {
    const i = e.index + dataArray.length % 4;
    return (i % 4) * 100 + Math.floor(i / 4) * 100 + 200;
  };

  getLiChildren = () => {
    const imgWidth = 220;
    const imgHeight = 152;
    const imgBoxWidth = 260;
    const imgBoxHeight = 192;
    // console.log("-----content0---this.props-----",this.props.fatherProps.indexInfo)

    return this.props.fatherProps.indexInfo.groupList[0].courseList.map((item, i, id) => {
      const { courseImgName, courseName,avatarUrl, teacherName, price, yCoin, salesNum, courseId} = item;
      const isEnter = typeof this.state.picOpen[i] === 'boolean';
      const isOpen = this.state.picOpen[i];

      const left = isEnter ? 0 : imgBoxWidth * (i % 4);
      const isTop = Math.floor(i / 4);
      let top = isTop ? (isTop - 1) * imgBoxHeight : 0;
      top = isEnter ? top : imgBoxHeight * isTop;


      const liStyle = isEnter ? { width: '100%', height: 350, zIndex: 1 } : null;
      const liAnimation = isOpen ?
        { boxShadow: '0 2px 8px rgba(140, 140, 140, .35)' } :
          { boxShadow: '0 0px 0px rgba(140, 140, 140, 0)' };
      let aAnimation = isEnter ?
        ({
          delay: 400,
          ease: 'easeInOutCubic',
          width: imgWidth,
          height: imgHeight,
          onComplete: this.onTweenEnd.bind(this, i),
          left: imgBoxWidth * (i % 4),
          top: isTop ? imgBoxHeight : 0,
        }) : null;


      // 位置 js 控制；
      return (
        <TweenOne
        key={i}
        style={{
          left,
          top,
          ...liStyle,
        }}
        component="li"
        animation={liAnimation}
        onClick={()=>{

          let unionid = getcookie("unionid")
          {/*console.log("--------------unionid-----",unionid)*/}
          {/*this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId,unionid}})*/}
          if (unionid != null && unionid !='' && unionid != undefined) {
            this.props.fatherProps.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,unionid}})
            this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId,unionid}})
          } else {
            window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

          }


        }}

      >
        <TweenOne
          onClick={e => this.onImgClick(e, i)}
          className={`${this.props.className}-grid-child`}
          animation={aAnimation}
        >
          <img src={courseImgName} width="100%" height="100%" onClick={(id)=>{
            {/*console.log("------id",id)*/}
            {/*console.log("------courseId",courseId)*/}
          }}/>
          <div>
            {courseName}
          </div>
          {/*<div>*/}
            {/*<img src={avatarUrl} width="50px" height="50px"/>*/}
            {/*<span>{teacherName}</span>*/}
          {/*</div>*/}
          <div>
            {/*<div>*/}
              {/*<span>逸贝：{yCoin}</span>*/}
              {/*<span>价格: {price}</span>*/}
            {/*</div>*/}

            <div>
              <span>{salesNum} 人在学</span>
            </div>
          </div>
        </TweenOne>

      </TweenOne>);
    });
  };




  render() {
    // console.log("-----content0---this.props",this.props)
    const props = { ...this.props };
    // console.log(props);
    const isMode = props.isMode;
    delete props.isMode;
    return (
      <div
        {...props}
        className={`content-template-wrapper content-half-wrapper ${props.className}-wrapper`}
      >
        <div className={`${props.className}-text`}>

            <h1 key="h1" id={`${props.id}-title`}>热门推荐</h1>
          <p>
            -----------------------
          </p>

            {/*<div className={`${props.className}-moreText`}>*/}
             {/**/}
              {/*<text className={`${props.className}-moreTextValue`}>更多</text>*/}
              {/*<img className={`${props.className}-pageRight`} src={pageRight} alt="更多"/>*/}

            {/*</div>*/}

        </div>
        <div className={`${props.className}-grid`} >
          <QueueAnim
            delay={this.getDelay}
            component="ul"
            className={`${this.props.className}-image-wrapper`}
            interval={0}
            type="bottom"
          >
            {this.getLiChildren()}
          </QueueAnim>
        </div>
      </div>
    );
  }
}


export default Content;
